<!DOCTYPE html>
<html ng-app='TweetSearch'>

<head>
    <link rel="icon" type="image/png" href="../../artwork/favicon.png">
    <title>User Profile Page</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/loklak.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.0.0/css/bootcards-desktop.min.css">

    <script src="../../js/angular.min.js"></script>
    <script src="../../js/angular-route.min.js"></script>
    <script src="../../js/loklak.js"></script>
    <style>
    table, th, td {
       border: 1px solid black;
    }
    </style>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
                  data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://loklak.org">
              <img src="/images/loklak_org.png" height="24" style="float:left;">: User Profile
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          </ul>
        </div>
      </div>
    </nav>
    <center>

        <h1>Enter the username of the user</h1>


        <div ng-controller="Controller">

            <input type="text" id="query" ng-model="query"
                   placeholder="Search tweet from Loklak"
                   ng-init="query = ''"
                   ng-keyup="$event.keyCode == 13 && query != '' ? Search() : null">
            <button href='#' class="btn btn-default"
                    type="button" id="button"
                    ng-click="query != '' ? Search() : null">Search</button>
            <br>
            <br>
            <br>
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div id="contactCard">

                        <div class="panel panel-default">
                            <div class="panel-heading clearfix">
                                <h3 class="panel-title pull-left">User Profile</h3>
                            </div>
                            <div class="list-group">
                                <div class="list-group-item">
                                    <img src="{{userData.profile_image_url}}" alt="" style="pull-left">
                                    <h4 class="list-group-item-heading">{{userData.name}}</h4>
                                </div>
                                <div class="list-group-item">
                                    <h4 class="list-group-item-heading">
                                    <strong>{{userData.followers_count}}</strong> Followers
                                    </h4>
                                </div>
                                <div class="list-group-item">
                                    <h4 class="list-group-item-heading">
                                    <strong>{{userData.statuses_count}}</strong> Statuses
                                    </h4>
                                </div>
                                <div class="list-group-item">
                                    <h4 class="list-group-item-heading">
                                    <small>{{userData.screen_name}}</small>
                                    </h4>
                                </div>
                            </div>
                        </div>

                    </div>
                        <!-- <p>{{userData}}</p> -->
                    </div>
                    <div class="col-md-7">
                        <table>
                            <tr ng-repeat="x in myData">
                                <td ng-bind-html="x.text"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

        </div>


    </center>

    <script>
        var app = angular.module('TweetSearch', []);
        app.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

            $scope.Search = function() {

                var QueryCommand = 'https://api.loklak.org/api/search.json?' +
                                   'callback=JSON_CALLBACK&q=' +
                                   $scope.query;

                $http.jsonp(String(QueryCommand)).success(function(response) {
                    console.log(response);
                    $scope.myData = response.statuses;
                    for (var i = 0; i < $scope.myData.length; ++i) {
                        $scope.myData[i].text = $sce.trustAsHtml($scope.myData[i].text);
                    }
                });

                var userQueryCommand = 'https://api.loklak.org/api/user.json?' +
                                       'callback=JSON_CALLBACK&screen_name=' +
                                       $scope.query;

                $http.jsonp(String(userQueryCommand)).success(function(response) {
                    $scope.userData = response.user;
                });
            }
        }]);
    </script>
</body>

</html>
